<template>
  <!-- 排量统计 -->
  <view class="conter">
    <cc-dateA title='排量统计' text='筛选日期' color='#fff' frist="日" second="月" third="年" fourth="自定义" @confirm="confirm_a"></cc-dateA>
    <view class="navigation_head"></view>
    <navigator class="head" url="../displacement_a/displacement_a">
      徽州区
      <!-- <image src="../../static/organization_ranking/xl.png" mode=""></image> -->
    </navigator>
    <uni-card>
      <view class="card_a">
        徽州区TVOC排量前六
      </view>
      <view class="region">
        <echarts :option="option" style="height: 300px;" @click="echartsClick"></echarts>
      </view>
    </uni-card>
    <uni-card class="card_height">
      <view class="card_b">
        TVOC排量详情
      </view>
      <view class="region">
        <scroll-view scroll-x="true" >
          <view  class="scroll"> 
            <echarts :option="option1" style="height: 600rpx;width: 3000rpx;" @click="echartsClick"></echarts>
          </view>
        </scroll-view>
      </view>
    </uni-card>
  </view>
</template>

<script>
  import echarts from '@/components/echarts/echarts.vue';
  import uCharts from '../../js_sdk/u-charts/u-charts/u-charts.js';
  var _self;
  var canvaPie = null;
  var canvaColumn = null;
  export default {
    components: {
      echarts
    },
    data() {
      return {
        date:'',
        choice:'',
        option: {
          legend: {
            top: 'bottom'
          },
          series: [{
            name: '面积模式',
            type: 'pie',
            radius: [30, 100],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: []
          }]
        },
        option1: {
          xAxis: {
            type: 'category',
            data: []
          },
          yAxis: {
            name: '排量',
            type: 'value'
          },
          series: [{
            data: [],
            type: 'bar'
          }]
        }
      }
    },

    methods: {
      getStatistics(){
        this.$http.get('/envirnment-air/app/analysis/outletValue/outletCount',{
          date:this.date,
          dateType:this.choice+1
        }).then(res=>{
          console.log(res);
          let List = []
          const timeList = [] 
          const valueList = [] 
          // 圆图
          List = res.data.topN
         // res.data.topN.forEach((item,index)=>{
         //   List.push({
         //     value:item.value,
         //     name:item.name
         //   })
         // })
         // console.log('123',List)
         // 柱状图
          res.data.counts.forEach((item,index)=>{
            timeList.push(item.key)
            valueList.push(item.value)
          }) 
          // console.log(valueList)
          this.option.series[0].data = List
          this.option1.xAxis.data = timeList 
          this.option1.series[0].data = valueList
          this.$refs.update(this.option1)
        })
      },
      // 获取时间和dateType参数
      confirm_a(e) {
        this.date = e.date
        this.choice = e.choice
        this.getStatistics()
        console.log('fjowefjie',e)
      },
      /**
       * 点击事件
       * @param {Object} params
       */
      echartsClick(params) {
        console.log('点击数据', params)
      },
    }
  }
</script>

<style lang="scss">
  .conter {
    height: 100vh;
    background: #F7F7F7;
    // overflow: hidden;
  }

  .navigation_head {
    height: calc(88rpx + var(--status-bar-height));
  }

  .head {
    margin: 25rpx auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 688rpx;
    height: 66rpx;
    background-color: #fff;

    image {
      width: 22rpx;
      height: 12rpx;
      margin-left: 10rpx;
    }
  }

  .card_a {
    font-size: 26rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .region{
    width: 100%;
    scroll-view{
      width: 100%;
    }
  }
  .scroll{
    width: 100%;
    transform: translate(-35%,-1%);
  }
  .card_b {
    font-size: 26rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .card_height{
    height: 620rpx !important;
  }
</style>
